<template>
    <div style="width:100%;height:100%">
        <div id="map"></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            map:null
        }
    },
    mounted(){
     this.init()
    },
    methods: {
        init(){
            this.smartmapx.mapbase="http://www.smartmapx.com";
            this.smartmapx.apikey="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8";
            this.map=new this.smartmapx.Map({
                container: 'map',
                mapId: 'map_id_1',
                center: [106.0273309086412, 37.93983942885503],
                zoom: 3.5
            })
            var nav = new this.smartmapx.NavigationControl();
            this.map.addControl(nav, 'top-right');

            // 添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
                    maxWidth: 100,
                    unit: 'm'
                }));
            this.map.on('load',()=>{
                this.map.addSource('bar',{
                    data: "http://dev.smartmapx.com/map/api/json/v_a1_03.json",
                    type: "geojson"
                    });
                this.map.addLayer({
                    "id": "bar",
                    "type": "bar",
                    "source": "bar",
                    "layout": {
                        "bar-data": ['y_2010', 'y_2011', 'y_2012', 'y_2013'],
                        "bar-data-min-value": 1, // 统计数值的最小值，非必须，无默认
                        "bar-data-max-value": 150, //  统计数值的最小值，必须
                        "bar-item-min-height": 1, // 柱状图最小高度，非必须
                        "bar-item-max-height": 120, // 柱状图最大高度，非必须，默认100
                        "bar-title": "2010年~2013年各省份新开法人单位数",
                        "bar-x-labels": ["2010年", "2011年", "2012年", "2013年"],
                        "bar-colors": ["red", "green", "yellow", "blue"],
                        "show-legend": true, // 是否显示图例，默认不显示
                        "legend-position": "top-left", // 图例显示的位置，top-left/top-right/bottom-left/bottom/right
                        "bar-item-width": 6,
                        "bar-gap-width": 3
                       },
                    "paint": {
                        "bar-opacity": 0.7,
                        "bar-translate": [5, 0],
                    }
                });
            this.map.on('click',(e)=>{
                 console.log(e)
               })
            })
        }
    }
}
</script>
<style scoped>
#map{
    height: 100%;
    width:100%;
}
</style>